<template>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">图书表格</h3>
    </div>
    <div class="panel-body form-inline">
      <div class="input-group">
        <div class="input-group-addon">书名</div>
        <input
          type="text"
          class="form-control"
          id="iptBookname"
          placeholder="请输入书名"
          v-model="bookName"
        />
      </div>
      <div class="input-group">
        <div class="input-group-addon">作者</div>
        <input
          type="text"
          class="form-control"
          id="iptAuthor"
          placeholder="请输入作者"
          v-model="bookAuthor"
        />
      </div>
      <div class="input-group">
        <div class="input-group-addon">出版社</div>
        <input
          type="text"
          class="form-control"
          id="iptPublisher"
          placeholder="请输入出版社"
          v-model="bookPublisher"
        />
      </div>
      <button id="btnAdd" class="btn btn-primary" @click="addFn">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookName: "",
      bookAuthor: "",
      bookPublisher: "",
    };
  },
  props: {
    addBook: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    addFn() {
      if (
        this.bookName.trim() == "" ||
        this.bookAuthor == "" ||
        this.bookPublisher == ""
      ) {
        this.bookName = "";
        this.bookAuthor = "";
        this.bookPublisher = "";
        return alert("请输入完整内容");
      }
      console.log(this.bookName);
      this.$axios({
        url: "/api/addbook",
        method: "POST",
        data: {
          bookname: this.bookName,
          author: this.bookAuthor,
          publisher: this.bookPublisher,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
      this.bookName = "";
      this.bookAuthor = "";
      this.bookPublisher = "";
      return alert("添加图书成功");
    },
  },
};
</script>

<style></style>
